import {
    createRouter,
    createWebHashHistory
} from 'vue-router'
import store from '@/store'
// 布局组件
import Layout from '@/views/Layout'
// 首页组件
import Home from '@/views/home'
// 分类组件
// 一级分类
import Cate from '@/views/cate'
// 二级分类
import SubCate from '@/views/cate/sub'
// 商品详情页
import Product from '@/views/product'
// 登录组件
import Login from '@/views/login'
// QQ登录回调页面组件
import LoginCallback from '@/views/login/components/callback.vue'
// 购物车页面组件
import Cart from '@/views/cart'
// 结算页面
import Checkout from '@/views/member/checkout/index.vue'
// 支付页面
import Pay from '@/views/member/pay/index.vue'
// 回调通知支付成功与否的页面
import CallbackResult from '@/views/member/pay/components/callbackResult.vue'

// 会员中心
import Member from '@/views/member/member/layout.vue'

// 个人中心
import UserCenter from '@/views/member/member/index.vue'

// 我的订单
import MyOrder from '@/views/member/member/order.vue'

// 订单详情
import OrderDetail from '@/views/member/member/components/order-detail.vue'

// 路由规则
const routes = [{
    path: '/',
    component: Layout,
    redirect: '/',
    children: [{
            path: '/',
            component: Home
        }, {
            path: '/cate/:id',
            component: Cate
        }, {
            path: '/cate/sub/:id',
            component: SubCate
        },
        {
            path: '/product/:id',
            component: Product
        }, {
            path: '/cart',
            component: Cart
        }, {
            path: '/member/checkout',
            component: Checkout
        },
        {
            path: '/member/pay',
            component: Pay
        }, {
            path: '/member/callback',
            component: CallbackResult
        }, {
            // 用户中心
            path: '/member',
            component: Member,
            redirect: '/member',
            // 三级路由
            children: [{
                    // 个人中心
                    path: '/member',
                    component: UserCenter
                },
                {
                    // 我的订单
                    path: '/member/order',
                    component: MyOrder
                },
                {
                    path: '/member/order/:id',
                    component: OrderDetail
                }
            ]
        }
    ]
}, {
    path: '/login',
    component: Login
}, {
    path: '/login/callback',
    component: LoginCallback
}]

// 创建路由实例
const router = createRouter({
    // 模糊匹配，只要路由第一层相同就会加上active样式
    // linkActiveClass: 'active',
    // 精准匹配：访问的路由跟当前的路由完成一致
    linkExactActiveClass: 'active',
    // 使用hash方式实现路由
    history: createWebHashHistory(),
    // 配置路由规则，写法和之前一样
    routes,
    // 路由切换时滚动条的滚动行为
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})

// 路由导航守卫
router.beforeEach((to, from, next) => {
    // 凡是以 member开头的路由地址都需要做登录
    if ((!store.state.user.profile.token) && to.path.startsWith('/member')) {
        next({
            path: '/login',
            query: {
                redirectUrl: encodeURIComponent(to.fullPath)
            }
        })
    }
    next()
})

export default router
